<script setup lang="ts">
import { reactive ,ref} from "vue";

const message='Hello World'
const onClick = () => {
  console.log('clicked')
} 
const movein= () => {
  console.log('鼠标移入')
}

const moveout = () => {
  console.log('鼠标移出')
}

const obj=reactive({
  name:'zhangsan',
  age:18
})

const totalenum=ref(100)
const addnum=()=>{
  totalenum.value++
}
const subnum=()=>{
  totalenum.value--
}

</script>

<template>
<!-- 通过JavaScript的charAt方法提取字符串中指定位置的字符 -->
<h1 class="title">{{ message.charAt(6)+' ! ! ! ! !' }}</h1>
  <button @click="onClick()">点击</button>
  <div class="box" @mouseenter="movein" @mouseleave="moveout"></div>
  <p @click="obj.age++" style="font-size: 24px;">{{ obj.age }}</p>

  <button @click="addnum()">+</button>
  <span>{{ totalenum }}</span>
  <button @click="subnum()">-</button>
</template>

<style scoped>
.title {
  color:white;
}

.box{
  background-color: greenyellow;
  width: 100px;
  height: 100px;
}
</style>
